<template>
  <view class="container">
    <view class="input-content">
      <view class="title-pic"></view>
      <up-form
        labelPosition="left"
        :model="model1"
        :rules="rules"
        ref="form1"
        :label-style="{ color: '#fff' }"
      >
        <!-- 用户名输入框 -->
        <up-form-item label="账号" prop="username">
          <up-input
            placeholder="请输入账号"
            v-model="model1.username"
            clearable
          ></up-input>
        </up-form-item>

        <!-- 密码输入框 -->
        <up-form-item label="密码" prop="password">
          <up-input
            placeholder="请输入密码"
            v-model="model1.password"
            type="password"
            clearable
          ></up-input>
        </up-form-item>
      </up-form>

      <!-- 登录按钮 -->
      <button class="login-btn" @click="handleLogin" :disabled="loading">
        {{ loading ? "登录中..." : "登录" }}
      </button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useInfoApi } from "@/api/login";
import CryptoJS from "crypto-js";
// 表单引用
const form1 = ref();
// 表单数据
const model1 = reactive({
  username: "",
  password: "",
});

// 表单验证规则
const rules = {
  username: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
    {
      min: 6,
      max: 20,
      message: "密码长度在6-20个字符之间",
      trigger: "blur",
    },
  ],
};

// 添加加载状态
const loading = ref(false);
// 登录处理函数
const handleLogin = () => {
  if (loading.value) return;
  form1.value
    ?.validate()
    .then(async (valid: boolean) => {
      if (valid) {
        loading.value = true;
        try {
          await useInfoApi().getToken({
            username: model1.username,
            password: model1.password,
            code: "fixd",
            randomStr: "60881763006682121",
          });
        } catch (err) {
          console.error(err, "登录失败");
        } finally {
          loading.value = false;
        }
      }
    })
    .catch((errors: Error) => {
      console.log("验证失败:", errors);
    });
};
</script>
<style lang="scss" scoped>
:deep(.u-input__content__field-wrapper__field) {
  color: #fff !important;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url("@/static/login/back.png") center/cover no-repeat;
}

.input-content {
  width: 90vw;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40rpx;
}

.title-pic {
  width: 50%;
  height: 200rpx;
  margin: 0 auto;
  background: url("@/static/login/title.png") center/contain no-repeat;
  margin-bottom: 40rpx;
}

.login-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #d62728;
  color: white;
  font-size: 36rpx;
  border-radius: 10rpx;
  margin-top: 40rpx;
  border: none;
  outline: none;
}
</style>
